<template>
    <div  :class="{'newsPage':loadOver,'skt-loading':hasData}" class="newsIndex" >
        <!--<Loading  v-if="hasData" />-->
        <ul class="navs-title">
            <li v-for="(item,index) in navList" class="skeleton" :key="index" :class="status==item.id?'status':'' " @click="tabClick(item.id)"
                :data-status="item.id">{{item.class_name}}
            </li>
        </ul>
        <div class="empty-data" v-if="notMore">
            <img src="../../../assets/img/quesheng_zanwuneirong@2x.png" alt="">
        </div>

        <div class="news_list" v-if="hasData">
            <ul>
                <li v-for="i in 3" :key=i >
                    <div>
                        <div class="article">
                            <p class="article_title skeleton">aaaa</p>
                            <p class="article_source skeleton" >aaaa</p>
                            <p class="article_source skeleton" >aaaa</p>
                            <div class="article_info">
                                <span class="article_num skeleton"><img src="@as/img/eyes.png" alt="">人看过</span>
                                <span class="article_time skeleton">aaa</span>
                            </div>
                        </div>
                        <div class="article_img skeleton">
                            <img src="item.photo" alt
                                 onerror="this.onerror=null;this.src='https://media.71ydj.com/FitPjkxAJxdRFRVrDCq1sTKxxgtf'">
                        </div>
                    </div>
                </li>
            </ul>
        </div>

        <mu-paper :z-depth="1" class="demo-loadmore-wrap">
            <mu-container ref="container" class="demo-loadmore-content">
                <mu-load-more  :loading="loading" @load="load">
                    <div class="news_list">
                        <ul>
                            <li v-for="(item,index) in newsList" :key="index" @click="toDetails(item.id,item.type)">
                                <div>
                                    <div class="article">
                                        <p class="article_title skeleton">{{item.title}}</p>
                                        <p class="article_source skeleton" v-if="item.source">{{item.source}}</p>
                                        <p class="article_source skeleton" v-if="!item.source">{{sourceText}}</p>
                                        <div class="article_info">
                                            <span class="article_num skeleton"><img src="@as/img/eyes.png" alt="">{{item.is_collection_id}}人看过</span>
                                            <span class="article_time skeleton">{{item.create_time | time }}</span>
                                        </div>
                                    </div>
                                    <div class="article_img skeleton">
                                        <img :src="item.photo" alt
                                             onerror="this.onerror=null;this.src='https://media.71ydj.com/FitPjkxAJxdRFRVrDCq1sTKxxgtf'">
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </mu-load-more>
            </mu-container>
        </mu-paper>

        <div class="loading" v-if="loadOver" :class="{'notPageOne':p>1||newsList.length<6}">{{loaded}}</div>
    </div>
</template>

<script>
    // import Loading from '@/components/loading.vue';
    import {mapState} from 'vuex';
    export default {
        data() {
            return {
                panelShow: false,//发布弹窗
                navsShow: false,//全部导航
                listData: [],
                num: 10,
                p: 1,
                loading: false,
                notMore:false,
                loadOver:false,
                hasData:true,
                loaded: "加载更多...",
                method: "",
                status: 1,//副导航切换
                sourceText: '七一云',
                newsList: [],
                videoList: [],
                navList: [],//二级分类
            }
        },
        computed:{
            ...mapState({
                sub_class_obj:state =>state.initNews.sub_class_obj,
                selectedId:state =>state.initNews.sub_class_obj.selectedId,
            }),
            // ...mapGetters(['sub_class_obj']),
            // sub_class_obj() {
            //     return this.$store.getters.sub_class_obj
            // }
        },
        watch: {
            // sub_class_obj(newValue,oldValue){
            //     console.log(newValue);
            //     console.log(oldValue)
            //     if(newValue.class_id!=oldValue.class_id){
            //         console.log('idid');
            //         this.getNavList();
            //         this.newsList =[];
            //     }
            // },
            selectedId(newValue,oldValue){
                if(newValue!=oldValue){
                    console.log('ididw');
                    this.getNavList();
                    this.newsList =[];
                }
            }

        },
        // components:{
        //     Loading
        // },
        mounted() {
            console.log(111)
            this.$progress.done();
            this.getNavList(this.p);

        },
        destroyed(){

        },
        methods: {
            toDetails(id, type) {
                this.$router.push({path: "details/newsDetails", query: {id: id, type: type}})
            },

            toSearch() {
                this.$router.push({path: "details/search", query: {type: 1}})
            },

            /*
           * 副导航切换
           */
            tabClick(id) {
                console.log(id)
                this.status = id;
                this.loadOver =false;
                this.p=1;
                this.notMore =false;
                this.newsList=[];
                this.initData(this.p,id);

            },
            /*
            * 副导航
            * */
            getNavList() {
                console.log(this.selectedId)
                console.log(this.$route)
                console.log(this.sub_class_obj);
                //判断当前是在宣传栏目点击切换还是通过其他模块进入到当前页面
                //宣传页面切换 操作 只需要获取到当前sub_class_obj值进行数据请求
                //其他模块进入 判断selectName
                console.log(this.$route.query);
                console.log(this.$store.state.initNews.selectName.selectName)
                if(this.$store.state.initNews.selectName.selectName){
                    //其他模块进入
                    if(this.$route.query.from){
                        this.getModelCloumn(this.$route.query.from);
                        this.getDetailCloumn();
                    }else{
                        this.getModelCloumn();
                        this.getDetailCloumn();
                    }
                }else{
                    if(this.sub_class_obj.class_id&&this.sub_class_obj.status){
                        this.getDetailCloumn();
                    }else{
                        console.log('~~~~~~~~~~')
                        console.log(this.$store.state.initNews.selectedId.selectedId)
                        console.log(this.$store.state.initNews.Navsenior.Navsenior)
                        this.getModelCloumn();
                        this.getDetailCloumn();
                    }
                }
                console.log(this.$store.state);
            },
            //其他模块跳转进入时候 需要匹配  并跳转到对应的新闻栏目
            getModelCloumn(name,callback){
                console.log( this.$store.state.initNews.Navsenior)
                if(name){
                    this.$store.state.initNews.Navsenior&&this.$store.state.initNews.Navsenior.Navsenior.forEach((el,index)=>{
                        if(el.class_name ==name){
                            console.log('name'+name)
                            console.log(1111);
                            console.log(index)
                            this.$store.commit('changeSubNav',{
                                class_id:  this.$store.state.initNews.Navsenior.Navsenior[index].id,
                                status: this.$store.state.initNews.Navsenior.Navsenior[index].status,
                                selectedId: this.selectedId
                            });

                        }
                    });
                }else{
                    console.log(this.$store.state.initNews.selectName.selectName +'asdddddd')
                    console.log( this.$store.state.initNews.Navsenior.Navsenior)
                    this.$store.state.initNews.Navsenior.Navsenior.forEach((el,index)=>{
                        if(this.$store.state.initNews.selectName.selectName ==el.class_name){
                            this.$store.commit('changeSubNav',{
                                class_id:  this.$store.state.initNews.Navsenior.Navsenior[index].id,
                                status: this.$store.state.initNews.Navsenior.Navsenior[index].status,
                                selectedId: this.selectedId
                            })
                        }
                    });
                }
                // this.$store.state.initNews.Navsenior.Navsenior.forEach((el,index)=>{
                //     if(this.$store.state.initNews.selectName.selectName ==el.class_name){
                //         this.$store.commit('changeSubNav',{
                //             class_id:  this.$store.state.initNews.Navsenior.Navsenior[index].id,
                //             status: this.$store.state.initNews.Navsenior.Navsenior[index].status,
                //             selectedId: this.selectedId
                //         })
                //     }
                // });
            },
            //获取二级分类数据
            getDetailCloumn(){
                this.$http
                    .get("app/My/second_class", {
                        class_id: this.sub_class_obj.class_id,
                        status: this.sub_class_obj.status,
                        uid: JSON.parse(Cookies.get("user_71ydj")).id,
                        org_id: JSON.parse(Cookies.get("user_71ydj")).organization_id,
                    })
                    .then(res => {
                        this.navList = res.data;
                        console.log(this.navList);
                        if(this.navList[0]){
                            this.initData(this.p,this.navList[0].id);
                            this.status =this.navList[0].id
                        }else{
                            this.hasData =false;
                            this.notMore =true;
                            this.newsList=[];
                            this.videoList=[];
                        }
                    });
            },
            /*获取列表数据*/
            initData(p,class_id) {
                this.$http
                    .get("app/NewCustom/new_list", {
                        p: p,
                        page: 6,
                        org_id: JSON.parse(Cookies.get("user_71ydj")).organization_id,
                        uid: JSON.parse(Cookies.get("user_71ydj")).id,
                        class_id
                    })
                    .then(res => {
                        this.hasData =false;
                        if(res.data.length){
                            this.newsList.push(...res.data);
                        }
                        console.log(this.newsList);
                        if(!res.data.length||res.data.length<9){
                            //没有更多数据了
                            if(res.data.length==0&&p==1){
                                this.loadOver =false;
                                this.notMore =true;
                                this.newsList=[];
                                this.videoList=[];
                            }else{
                                this.loadOver =true;
                                this.notMore =false;
                            }
                            this.loading =false;
                            this.loaded='没有更多数据了'
                        }
                        if(p==1){
                            if(res.data.length<9&&res.data.length!=0){
                                this.loadOver =true;
                                this.loading =false;
                                this.loaded='没有更多数据了';
                                return false
                            }else{
                                this.loadOver =false;
                                this.loading =false;
                                this.notMore =true;
                            }
                        }else{
                            if(res.data.length){
                            }else{
                                this.loadOver =true;
                                this.loading =false;
                                this.loaded='没有更多数据了'
                                return false
                            }
                        }
                    });
            },
            load() {
                //因为load 触发多次 所以做分时节流
                if (!this.loadOver) {
                    this.loading = true;
                    clearTimeout(this.method);
                    this.method = setTimeout(() => {
                        this.p = this.p + 1;
                        this.initData(this.p,this.status);
                        this.loading =false;
                    }, 2000);
                }
            },
        },
    }
</script>

<style scoped>
    p {
        margin: 0;
        padding: 0;
    }

    .top {

        width: 100%;
        height: 100px;
    }

    .top .header {
        width: 359px;
        padding: 15px 0 0 16px;
        display: flex;
        justify-content: space-between;
    }

    .top .title {
        margin: 0 !important;
        font-size: 19px;
        font-weight: bold;
        color: #333;
    }

    .header div {
        display: flex;
        align-items: center;
        width: 60px;
        justify-content: space-between;
    }

    .top img {
        width: 19px;
        height: 19px;
    }

    .learnIndex {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .learnIndex img {
        margin-right: 16px;
    }

    .navs-title::-webkit-scrollbar {
        display: none;
    }

    .navs-title {
        width: 359px;
        /*max-height: 28px;*/
        overflow-x: auto;
        white-space: nowrap;
        margin-left: 16px;
        margin-top: 15px;
    }

    .navs-title li {
        display: inline-block;
        height: 28px;
        box-sizing: border-box;
        overflow: hidden;
        line-height: 28px;
        border-radius: 10rem;
        font-size: 12px;
        color: #999999;
        padding: 0 13px;
        background: #F8F8F8;
        margin-right: 8px;
    }

    .navs-title li.status {
        color: #EB4D44;
    }

    /*新闻列表*/
    .news_list {
        max-width: 350px;
        overflow: hidden;
        margin: 0 auto;
        width: 100%;
        display: flex;
    }

    .news_list ul {
        width: 100%;
    }

    .news_list li {
        display: inline-block;
        width: 100%;
        border-bottom: 1px solid #ddd;
    }

    .news_list li:last-child {
        border-bottom: none;
    }

    /*一张图片的新闻*/
    .article {
        width: 200px;
        float: left;
        margin: 20px 0 0 0;
    }

    .article_title {
        max-height: 48px;
        font-size: 16px;
        color: #333333;
        line-height: 24px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .article_source {
        font-size: 12px;
        color: #999999;
        margin-top: 10px;
    }

    .article_info {
        display: inline-block;
        width: 100%;
        font-size: 12px;
        color: #999;
        margin-top: 10px;
    }

    .article_info .article_num {
        float: left;
    }

    .article_num img {
        width: 13px;
        height: 11px;
        display: inline-block;
        margin-right: 6px;

    }

    .article_info .article_time {
        float: right;
        margin-right: 15px;
    }

    .article_img {
        width: 130px;
        float: right;
        margin-left: 20px;
        margin-top: 20px;
    }

    .article_img img {
        width: 130px;
        height: 97px;
        border-radius: 4px;
    }

    /*没有图片的新闻*/
    .article2 {
        width: 360px !important;
    }

    /*3张图片*/
    .article3 {
        width: 360px !important;
        margin: 20px 0 0 0
    }

    .article_img3 {
        width: 100%;
        margin: 10px 0 0 0;
        overflow: hidden;
        display: flex;
    }

    .article_img3 img {
        width: 110px;
        height: 83px;
        border-radius: 4px;
        margin-right: 7px;
    }

    .article_img3 img:last-child {
        margin-right: 0;
    }
    .fabu_img {
        position: fixed;
        bottom: 70px;
        width: 43px;
        height: 43px;
        right: 10px;
    }
    .loading {
        width: 343px;
        margin: 0 16px ;
        font-size: 14px;
        color: #dddddd;
        clear: both;
        line-height: 61px;
        text-align: center;
    }
    .newsIndex{
        height: 100%;
    }
    .mu-load-more /deep/ .mu-circle-spinner{
        border-color: #e5e5e5;
    }
    .newsPage /deep/ .mu-infinite-scroll{
        display: none;
        height: 0;
    }
    .newsIndex /deep/.mu-elevation-1{
        box-shadow: 0 0.05333rem 0.02667rem -0.02667rem rgba(0,0,0,0), 0 0.02667rem 0.02667rem 0 rgba(0,0,0,0), 0 0.02667rem 0.08rem 0 rgba(0,0,0,0); ;
        -webkit-box-shadow:0 0.05333rem 0.02667rem -0.02667rem rgba(0,0,0,0), 0 0.02667rem 0.02667rem 0 rgba(0,0,0,0), 0 0.02667rem 0.08rem 0 rgba(0,0,0,0); ;
    }
    .empty-data{
        position: relative;
        width: 100%;
        min-height: 60vh;
        position: relative;
        /*background-image: url("../../../../assets/img/quesheng_zanwuneirong@2x.png");*/
        background-size: 100% 100%;
        background-repeat: no-repeat;

    }
  .empty-data img{
        display: block;
        width: 100%;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
          bottom: 0;
          margin: auto;
    }
</style>